<template>
  <div class="login-container">
    <div class="main___LeVh7">
      <h3 class="title___J8z2J">悦兴物业综合服务平台</h3>
      <el-form ref="form" :model="queryData" :rules="rules">
        <el-form-item class="login-name" prop="username">
          <el-input
            v-model="queryData.username"
            prefix-icon="el-icon-user"
            size="small"
            name="username"
            placeholder="请输入用户名"
            @focus="removeName = true"
          />
          <span v-show="removeName" class="show-name" @click="clearName">
            <i class="el-icon-circle-close" />
          </span>
        </el-form-item>
        <el-form-item class="login-pwd" prop="password">
          <el-input
            v-model="queryData.password"
            prefix-icon="el-icon-lock"
            size="small"
            type="password"
            placeholder="请输入密码"
            name="password"
            show-password
          />
        </el-form-item>
        <el-row type="flex" justify="center">
          <el-button size="small" type="primary" @click="adminLogin">登录</el-button>
          <el-button size="small" @click="reset">重置</el-button>
        </el-row>
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
  name: 'AdminLogin',
  data() {
    return {
      queryData: {
        username: 'admin',
        password: 'admin888'
      },
      // 控制清除按钮显示
      removeName: true,
      rules: {
        username: [{ required: true, message: '请输入用户名', trigger: ['change', 'blur'] }],
        password: [{ required: true, message: '请输入密码', trigger: ['change', 'blur'] }]
      }
    }
  },
  methods: {
    // 点击清除按钮，清空输入框
    clearName() {
      this.queryData.username = ''
      this.removeName = false
    },
    reset() {
      this.queryData = {
        username: 'admin',
        password: 'admin888'
      }
    },
    // 登录
    async adminLogin() {
      try {
        await this.$refs.form.validate()
      } catch (error) {
        return this.$message.error('密码错误')
      }
      await this.$store.dispatch('user/login', this.queryData)
      this.$message.success('登录成功')
      this.$router.push('/')
      this.$router.go(0)
    }
  }
}
</script>
<style lang="scss" scoped>
.login-container {
  width: 100%;
  height: 100%;
  background: url("../../assets/images/bgImg.jpg") no-repeat center / cover;

  .main___LeVh7 {
    width: 460px;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: #ffffff4d;
    box-shadow: 0 0 10px #0003;
    padding: 20px 40px 40px;
    .title___J8z2J {
      text-align: center;
      line-height: 80px;
      font-size: 20px;
      color: #004fd9;
      font-weight: 500;
    }
  }
  .login-name {
      position: relative;
      .show-name {
        position: absolute;
        right: 10px;
        font-size: 16px;
        user-select: none;
        color: #dad6d6;;
      }
    }
}
</style>
